@keyframes flip {
    0% {
            transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg)
    }
}
@keyframes fan1 {
    50% {
        color: lightpink;
    }
    100% {
        color: lightskyblue;
    }
}
@keyframes fan2 {
    50% {
        color: lightskyblue;
    }
    100% {
        color: lawngreen;
    }
}
@keyframes fan3 {
    50% {
        color: lawngreen;
    }
    100% {
        color: lightpink;
    }
}
@keyframes colorChange {
    0% {
        color: lightblue;
    }
    33% {
        color: lightseagreen;
    }
    66% {
        color: #99ff66;
    }
    100% {
        color: #663333; 
    }
}
.game-cover {
    perspective: 500px;
    padding-top: 16vh;
}
.cover-img {
    position: relative;
    width: 80px;
    height: 110px;
    margin: 50px auto 20px;
    transform-style: preserve-3d;
    animation: flip 5s ease infinite alternate-reverse;
    background-image: url(../img/index.jpeg);
    background-size: 80px 110px;
}
.cover-img:hover {
    animation-play-state: paused;
}
.game-cover h1{
    color: #fff;
    letter-spacing: 5px;
    text-align: center;
}
.game-cover h1 span:nth-child(1) {
    color: lawngreen;
    animation: fan1 5s linear infinite;
}
.game-cover h1 span:nth-child(2) {
    color: lightpink;
    animation: fan2 5s linear infinite;
}
.game-cover h1 span:nth-child(3) {
    color: lightskyblue;
    animation: fan3 5s linear infinite;
}
.game-cover p {
    margin: 20px;
   text-align: center;
   color: lightyellow;
}
.game-cover p .attention {
    font-size: 18px;
    color: lightblue;
    animation: colorChange 3s steps(6) infinite;
}
.start-btn {
    height: 40px;
    width: 120px;
    margin:0 auto;
}
.game-cover .start-btn button {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right,#cc66ff 10%, #ccff33 90% );
    border: 0;
    cursor: pointer;
    color: midnightblue;
}